<template>
  <div>
    <n-modal
      v-model:show="showModal"
      :mask-closable="false"
      :show-icon="false"
      preset="dialog"
      transform-origin="center"
      title="调整积分"
      style="width: 560px"
    >
      <n-scrollbar style="max-height: 87vh" class="pr-5">
        <n-spin :show="loading" description="请稍候...">
          <n-form
            ref="formRef"
            :model="formValue"
            :rules="rules"
            :label-placement="settingStore.isMobile ? 'top' : 'left'"
            label-width="auto"
            class="py-4"
          >
            <n-grid cols="1 s:1 m:1 l:1 xl:1 2xl:1" responsive="screen">
              <n-gi span="1">
                <n-form-item label="当前积分" path="balance">
                  {{formValue.balance}}
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="调整值" path="value">
                  <n-input-number placeholder="请输入调整值" v-model:value="formValue.value" />
                  <!--调整后数值是-->
                  <template #feedback><span style="color: red">调整后：{{ formValue.value + formValue.balance }} 积分</span></template>
                </n-form-item>

              </n-gi>
              <n-gi span="1">
                <n-form-item label="操作人" path="operator">
                  {{formValue.operator}}
                </n-form-item>
              </n-gi>
              <n-gi span="1">
                <n-form-item label="备注" path="des" :show-require-mark="true">
                  <n-input type="textarea" placeholder="请输入备注" v-model:value="formValue.des" />
                </n-form-item>
              </n-gi>
            </n-grid>
          </n-form>
        </n-spin>
      </n-scrollbar>
      <template #action>
        <n-space>
          <n-button @click="closeForm"> 取消 </n-button>
          <n-button type="info" :loading="formBtnLoading" @click="confirmForm"> 确定 </n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BalanceEdit } from '@/api/pmsMember';
  import { useProjectSettingStore } from '@/store/modules/projectSetting';
  import { useUserStore } from '@/store/modules/user';
  import { useMessage, FormItemRule } from 'naive-ui';
  import Verify from "@/views/spaSettlementOrder/verify.vue";

  const emit = defineEmits(['reloadInfo']);
  const message = useMessage();
  const settingStore = useProjectSettingStore();
  const userStore = useUserStore();
  const loading = ref(false);
  const showModal = ref(false);
  const formValue = ref({
    id: '',
    balance: '',
    value: 0,
    operator: userStore.getUsername,
    des: '',
  })
  const formRef = ref<any>({});
  const formBtnLoading = ref(false);

  const rules = {
    value: {
      required: true,
      validator(rule: FormItemRule, value: string) {
        if ((Number(value) + Number(formValue.value.balance)) < 0) {
          return new Error('调整值与当前积分数相加不能小于0')
        }
        return true
      },
      trigger: ['blur', 'input'],
    },
    des: {
      required: true,
      trigger: ['blur', 'input'],
      validator(rule: FormItemRule, value: string) {
        if (!value) {
          return new Error('备注必填')
        }
      }
    },
  };

  function openModal(id, balance) {
    formValue.value.id = id
    formValue.value.balance = balance

    showModal.value = true;
  }

  function confirmForm(e) {
    e.preventDefault();
    formBtnLoading.value = true;
    formRef.value.validate((errors) => {
      if (!errors) {
        BalanceEdit(formValue.value).then((_res) => {
          message.success('操作成功');
          setTimeout(() => {
            closeForm();
            formBtnLoading.value = false;
            emit('reloadInfo');
          });
        }).catch((err) => {
          formBtnLoading.value = false;
        });
      } else {
        message.error('验证错误');
        formBtnLoading.value = false;
      }
    });
  }

  function closeForm() {
    showModal.value = false;
    loading.value = false;
    formValue.value = {
      id: '',
      balance: '',
      value: 0,
      des: '',
    }
  }

  defineExpose({
    openModal,
  });
</script>

<style lang="less"></style>
